<!-- stories/templates/stories/review_story.html -->
{% extends 'stories/base.html' %}
{% load static %}
{% load story_extras %}

{% block title %}审核故事 - AI故事生成网站{% endblock %}

{% block content %}
<div class="container">
    <div class="page-header">
        <h1>审核故事</h1>
        <div class="page-actions">
            <a href="{% url 'stories:admin_review' %}" class="btn btn-secondary">返回审核列表</a>
            {% if search_query %}
                <a href="{% url 'stories:admin_review' %}?search_query={{ search_query }}" class="btn btn-secondary">返回查询结果</a>
            {% endif %}
        </div>
    </div>

    <div class="review-story-content">
        <div class="story-header">
            <h2>{{ story.title }}</h2>
            <div class="story-meta">
                <span class="author">作者: {{ story.author.username }}</span>
                <span class="category">{{ story.category.name }}</span>
                <span class="date">提交时间: {{ story.created_at|date:"Y-m-d H:i" }}</span>
            </div>
        </div>

        {% if detected_words %}
            <div class="sensitive-words-alert">
                <h3>⚠️ 检测到敏感词</h3>
                <p>在故事标题或内容中检测到以下敏感词，请特别注意：</p>
                <ul>
                    {% for word in detected_words %}
                        <li>{{ word }}</li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}

        <!-- 自定义敏感词汇检索 -->
        <div class="custom-search-section">
            <h3>🔍 自定义敏感词汇检索</h3>
            <form method="get" class="custom-search-form" id="customSearchForm">
                <div class="form-group">
                    <input type="text" id="customSearchInput" placeholder="输入要检索的敏感词汇" class="form-control">
                    <button type="button" id="customSearchBtn" class="btn btn-primary">检索</button>
                    <button type="button" id="clearHighlightBtn" class="btn btn-secondary" style="display: none;">清除高亮</button>
                </div>
            </form>
        </div>

        <div class="story-content">
            <h3>📖 故事内容</h3>
            <div class="content-text" id="storyContent">
                {% if search_query %}
                    {{ story.content|highlight_word:search_query|linebreaks }}
                {% else %}
                    {{ story.content|linebreaks }}
                {% endif %}
            </div>
        </div>

        <div class="review-form">
            <h3>✅ 审核操作</h3>
            <form method="post" class="review-action-form">
                {% csrf_token %}
                <div class="form-group">
                    <label>{{ form.status.label }}</label>
                    <div class="radio-group">
                        {% for radio in form.status %}
                            <label class="radio-option {% if radio.choice_value == 'published' %}published{% elif radio.choice_value == 'rejected' %}rejected{% endif %}">
                                {{ radio.tag }}
                                <span class="radio-label">{{ radio.choice_label }}</span>
                            </label>
                        {% endfor %}
                    </div>
                </div>
                
                <div class="form-group">
                    <label>{{ form.rejection_reason.label }}</label>
                    {{ form.rejection_reason }}
                    <p class="help-text">驳回时请填写具体原因，以便作者修改</p>
                </div>
                
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">提交审核结果</button>
                    <a href="{% url 'stories:admin_review' %}" class="btn btn-secondary">取消</a>
                    {% if search_query %}
                        <a href="{% url 'stories:admin_review' %}?search_query={{ search_query }}" class="btn btn-secondary">返回查询结果</a>
                    {% endif %}
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 自定义敏感词汇检索功能
    $('#customSearchBtn').click(function() {
        var searchTerm = $('#customSearchInput').val().trim();
        if (searchTerm) {
            // 高亮显示匹配的词汇
            highlightText(searchTerm);
            $('#clearHighlightBtn').show();
        }
    });
    
    // 清除高亮功能
    $('#clearHighlightBtn').click(function() {
        // 移除所有高亮
        $('#storyContent').html($('#storyContent').text());
        $('#customSearchInput').val('');
        $(this).hide();
    });
    
    // 回车键触发搜索
    $('#customSearchInput').keypress(function(e) {
        if (e.which == 13) {
            $('#customSearchBtn').click();
            return false;
        }
    });
    
    // 高亮文本函数
    function highlightText(term) {
        var content = $('#storyContent').html();
        var regex = new RegExp('(' + term + ')', 'gi');
        var highlightedContent = content.replace(regex, '<span class="highlight">$1</span>');
        $('#storyContent').html(highlightedContent);
    }
    
    // 审核表单提交确认
    $('.review-action-form').submit(function(e) {
        var selectedStatus = $('input[name="status"]:checked').val();
        var storyTitle = '{{ story.title }}';
        
        if (!selectedStatus) {
            alert('请选择审核结果');
            e.preventDefault();
            return false;
        }
        
        if (selectedStatus === 'rejected' && !$('textarea[name="rejection_reason"]').val().trim()) {
            alert('驳回时必须填写驳回原因');
            e.preventDefault();
            return false;
        }
        
        var actionText = selectedStatus === 'published' ? '通过' : '驳回';
        if (!confirm('确定要' + actionText + '故事《' + storyTitle + '》吗？')) {
            e.preventDefault();
            return false;
        }
    });
    
    // 根据选择的审核状态显示/隐藏驳回原因
    $('input[name="status"]').change(function() {
        if ($(this).val() === 'rejected') {
            $('#id_rejection_reason').focus();
        }
    });
});
</script>
{% endblock %}